<template>
  <div id="main">
    <div v-if="sy_data.finished && sy_data.items.length == 0" v-cloak>
      <div class="no-data aui-text-center aui-text-9">
        <i class="iconfont icon-lujing1161"></i>
        <div class="aui-ftn16">空空如也~</div>
      </div>
    </div>
    <section
      class="
        sy_list
        aui-padded-t-5 aui-padded-b-5 aui-padded-l-10 aui-padded-r-10
      "
    >
      <van-pull-refresh
        v-model="sy_data.refreshing"
        @refresh="fnLoadMore"
        :disabled="disabled"
      >
        <van-row
          class="list aui-padded-10 aui-margin-b-5 aui-bg-f"
          v-for="(item, index) in sy_data.items"
          :key="index"
          @click="fnOpenDetail(item.id, item.type)"
        >
          <van-col span="6">
            <div
              class="good-img"
              :style="{ backgroundImage: 'url(' + item.image + ')' }"
              v-lazy="item.image"
            >
              <div class="tag-group">
                <div class="all-red  aui-margin-b-5" v-if="item.is_sd">
                  <span>商</span>
                </div>
                <div class="all-red aui-margin-b-5" v-if="item.all_red > 0">
                  <i class="iconfont icon-zijin"></i>
                  <span>+{{ item.all_red }}</span>
                </div>
                <div
                  class="is-zhui"
                  v-if="item.is_zhui == 1"
                  :style="{ top: item.all_red > 0 ? '20px' : '0px' }"
                >
                  <i class="iconfont icon-zhuiping"></i>
                  <span class="aui-ftn12">追评</span>
                </div>
              </div>
            </div>
          </van-col>
          <van-col span="12">
            <div class="cont aui-padded-l-10">
              <div
                class="name van-ellipsis aui-ftn14 aui-text-3"
                v-text="item.name"
              ></div>
              <div class="tag aui-ftn12">
                <span style="text-decoration: line-through"
                  >￥{{ item.price }}</span
                >
                <span
                  style="padding-left: 4px;color: #f7a512"
                  v-if="item.type == 2"
                  >￥{{ (item.price - item.back_price).toFixed(2) }}</span
                >
              </div>
              <div class="other aui-ftn12">
                剩 {{ item.exitnum }}/{{ item.num }}份
              </div>
            </div>
          </van-col>
          <van-col span="6" class="rt aui-text-right">
            <i
              class="iconfont icon-shandian aui-ftn10 aui-text-center"
              :class="{ no_sk: item.puttype == 1, sk: item.puttype != 1 }"
              v-cloak
            ></i>
            <div>
              <button
                class="aui-ftn12 aui-text-f aui-text-center aui-btn"
                v-bind:class="{ sy: !item.exittime && item.exitnum > 0 }"
                v-if="!item.exittime && item.exitnum > 0"
                v-cloak
              >
                去申请
              </button>
              <button
                class="aui-ftn12 aui-text-f aui-text-center aui-btn"
                v-bind:class="{ finished: !item.exittime && !item.exitnum }"
                v-else-if="!item.exittime && !item.exitnum"
                v-cloak
              >
                已抢完
              </button>
              <button
                class="aui-ftn12 aui-text-6 aui-text-center aui-btn"
                v-bind:class="{ countdown: item.exittime }"
                v-else-if="item.exittime"
                v-cloak
              >
                <van-count-down
                  :time="item.exittime * 1000"
                  format="HH 时 mm 分 ss 秒"
                  @finish="item.exittime = 0"
                />
              </button>
            </div>
          </van-col>
        </van-row>
      </van-pull-refresh>
      <div
        class="aui-text-center aui-text-9 aui-ftn13 aui-padded-15"
        v-if="sy_data.loading && !sy_data.finished"
        v-cloak
      >
        —— 加载中 ——
      </div>
      <div
        class="page"
        v-if="
          page.arr.length > 1 && !sy_data.loading && sy_data.items.length > 0
        "
        v-cloak
      >
        <div
          class="item aui-ftn12"
          :class="{ active: item == page.p }"
          v-for="(item, index) in page.arr"
          :key="index"
          v-text="item"
          @click="fnChangePage(item)"
        ></div>
      </div>
    </section>
  </div>
</template>

<script>
import list from "../../../service/free_sy.js";
export default {
  data() {
    return {
      text: "",
      loading: false,
      s_top: 0,
      is_scroll: false,
      sy_data: {
        loading: false,
        finished: false,
        refreshing: false,
        items: [],
      },
      param: {
        p: 0,
        n: 50,
        type: 1,
        category: "",
        downtype: "",
        puttype: "",
        sort: "",
        isLoading: true,
      },
      disabled: false,
      page: {
        total: 10,
        p: 1,
        arr: [],
      },
    };
  },
  props: ["title"],
  mounted() {
    var vm = this;
    window.addEventListener(
      "scroll",
      function() {
        vm.s_top = vm.utils.getScrollTop();
        vm.handleScroll();
      },
      true
    );
  },
  activated() {},
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    handleScroll() {
      this.disabled = this.utils.handleScroll();
    },
    // 切换分页
    fnChangePage: function(p) {
      this.page.arr = [];
      if (p != "...") {
        this.page.p = p;
        this.fnGetCateData();
        this.fnInitPage(p);
      } else {
        return;
      }
    },
    // 初始化分页
    fnInitPage: function(p) {
      this.page.arr = [];
      if (this.page.total <= 5) {
        for (var i = 1; i <= this.page.total; i++) {
          this.page.arr.push(i);
        }
      } else {
        if (p <= 3) {
          this.page.arr = [1, 2, 3, 4, 5, "...", this.page.total];
        } else {
          if (p < this.page.total - 2) {
            this.page.arr = [
              1,
              "...",
              p - 2,
              p - 1,
              p,
              p + 1,
              p + 2,
              "...",
              this.page.total,
            ];
          } else {
            this.page.arr = [
              1,
              "...",
              this.page.total - 3,
              this.page.total - 2,
              this.page.total - 1,
              this.page.total,
            ];
          }
        }
      }
    },
    fnGetCateData: function() {
      var vm = this;
      if (!this.sy_data.loading && !this.sy_data.finished) {
        this.sy_data.loading = true;
        this.param.p = this.page.p;
        list.fnGetDataList(this.param).then((res) => {
          this.sy_data.loading = false;
          if (this.is_scroll) {
            setTimeout(function() {
              window.scrollTo(0, vm.$store.state.s_top);
            }, 100);
          } else {
            window.scrollTo(0, 0);
          }
          if (res && res.status) {
            if (this.param.p == 1) {
              this.page.total = res.page;
              this.page.p = this.param.p;
              this.fnInitPage(1);
            }
            this.sy_data.items = res.data;
            this.is_scroll = false;
          } else {
            this.sy_data.finished = true;
          }
        });
      }
    },
    // 缓存数据
    fnGetStorageData: function() {
      var _param = JSON.parse(this.$store.state.param);
      this.sy_data = {
        items: [],
        loading: false,
        finished: false,
        refreshing: false,
      };
      this.param = {
        p: _param.p,
        n: 50,
        type: _param.type,
        category: _param.category,
        sort: _param.sort,
        downtype: _param.downtype,
        puttype: _param.puttype,
        isLoading: true,
      };
      this.is_scroll = true;
      this.fnChangePage(_param.p);
    },
    fnLoadMore() {
      this.sy_data.finished = false;
      this.sy_data.loading = false;
      this.sy_data.refreshing = false;
      this.fnGetCateData();
    },
    // 切换类别
    fnChangeCate: function(id, cate_type, typeId) {
      this.param.type = typeId;
      this.sy_data = {
        items: [],
        loading: false,
        finished: false,
        refreshing: false,
      };
      switch (cate_type) {
        case "category":
          this.param.category = id ? id : "";
          break;
        case "sort":
          this.param.sort = id ? id : "";
          break;
        case "downtype":
          this.param.downtype = id ? id : "";
          break;
        case "puttype":
          this.param.puttype = id ? id : "";
          break;
      }
      this.fnChangePage(1);
    },
    fnChangeFrm: function(typeId, categoryId, downtypeId, puttypeId, sortId) {
      //   this.param.type = type;
      this.sy_data = {
        items: [],
        loading: false,
        finished: false,
        refreshing: false,
      };
      this.param = {
        p: 0,
        n: 50,
        type: typeId,
        category: categoryId,
        sort: sortId,
        downtype: downtypeId,
        puttype: puttypeId,
        isLoading: true,
      };
      this.fnChangePage(1);
    },
    fnOpenDetail: function(id, type) {
      this.param["title"] = this.$route.query.title;
      this.utils.fnOpenCommon(this, { name: "product", params: { id: id } });
      this.$store.commit("KEEPALIVE", {
        s_top: this.s_top,
        param: JSON.stringify(this.param),
      });
    },
  },
};
</script>

<style lang="scss" scoped>
section.sy_list div.list {
  position: relative;
  border-radius: 4px;
}
section.sy_list div.list .good-img {
  position: relative;
}

section.sy_list div.list .good-img .tag-group {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 88;
  display: flex;
  flex-direction: column;
  // align-items: flex-end;
}

section.sy_list div.list .good-img .all-red,
section.sy_list div.list .good-img .is-zhui {
  background-color: rgba(247, 57, 87, .7);
  border-radius: 0 0 0 10px;
  color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0 2px 0 3px;
}

section.sy_list div.list .good-img .all-red span,
section.sy_list div.list .good-img .is-zhui span {
  font-size: 12px;
  padding-left: 2px;
}
section.sy_list div.list div.cont {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
section.sy_list div.list div.cont div.name {
  padding-bottom: 20px;
}

section.sy_list div.list div.cont div.tag {
  padding-bottom: 5px;
}
section.sy_list div.list div.cont div.tag,
section.sy_list div.list div.cont div.other {
  color: #aaa;
}

section.sy_list div.list div.rt {
  height: 84px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
}

section.sy_list div.list div.rt i {
  width: 27px;
  height: 27px;
  line-height: 27px;
  display: inline-block;
  border-radius: 50%;
}
section.sy_list div.list div.rt i.sk {
  background-color: rgba(247, 57, 87, 0);
  opacity: 0;
}

section.sy_list div.list div.rt i.no_sk {
  background-color: rgba(247, 57, 87, 0.1);
  color: var(--pink);
}

section.sy_list div.list div.rt button {
  padding: 0 10px;
  border: 0;
}

section.sy_list div.list div.rt button.countdown {
  background-color: #e5e5e5;
}
section.sy_list div.list div.rt button.finished {
  background-color: #a9a9a9;
}
section.sy_list div.list div.rt button.sy {
  background-color: var(--pink);
}
div.page {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
}
div.page div.item {
  height: 28px;
  line-height: 28px;
  padding: 0 8px;
  border: 1px solid #ddd;
  color: #777;
  background-color: #fff;
  margin-left: 6px;
}
div.page div.item.active {
  color: #fff;
  background-color: var(--pink);
  border-color: var(--pink);
}
</style>
